<template>
	<view class="">
		<up-tabs :list="tabs" @click="handleClick" lineWidth="38" lineColor="#F1692B" :activeStyle="{color:'#F1692B'}"
			:inactiveStyle="{color:'#A6A1A1'}"></up-tabs>
		<z-paging ref="paging" :fixed="false" use-page-scroll v-model="dataList" @query="queryList">
			<view class="comment-list" v-if="dataList.length>0">
				<Order @click="handleItemClick(item)" v-for="(item, index) in dataList" :key="index" :data="item" />
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import Order from './components/order.vue'
	import {
		ref,
		computed
	} from 'vue';
	import order from '@/api/order.js'
	// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	const now_role = uni.getStorageSync('userInfo').now_role
	// 创建响应式tabs  
	const tabs = computed(() => {
		if (now_role == 1) {
			return [{
					name: '全部',
					value: ''
				},
				{
					name: '待接单',
					value: '1'
				},
				{
					name: '待选择',
					value: '5'
				},
				{
					name: '待取件',
					value: '2'
				},
				{
					name: '送件中',
					value: '3'
				}
			]
		} else {
			return [{
					name: '全部',
					value: ''
				},
				{
					name: '待选择',
					value: '1'
				},
				{
					name: '待取件',
					value: '2'
				},
				{
					name: '送件中',
					value: '3'
				},
				{
					name: '已完成',
					value: '5'
				}
			]
		}
	})
	const type = ref(0)
	const handleClick = (e) => {
		console.log(e);
		type.value = e.value
		queryList(1, 10)
	}
	const dataList = ref([])
	const paging = ref()
	// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
	useZPaging(paging)
	const queryList = async (pageNo, pageSize) => {
		const {
			status,
			info,
			data
		} = await order.orderList({
			status: type.value,
			page: pageNo,
			page_size: pageSize
		})
		if (status == 1) {
			paging.value.complete(data.list)
		}
	}
	const handleItemClick = (val) => {
		uni.navigateTo({
			url: '/pages/user/order_detail?id=' + val.id
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs {
		background: #fff;
		.u-tabs__wrapper__nav {
			.u-tabs__wrapper__nav__item {
				width: 20vw;
			}
		}
	}

	.comment-list {
		padding: 20rpx 26rpx;
	}
</style>